<template>
  <div id="contractsList">
    <div class="filterQuery">
      <div class="tiao">
        <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          placeholder="请输入涉及关键词"
          v-model="input"
          class="input-with-select"
          size="small"
          style="margin-left: -1px;"
        >
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <!-- <el-table-column prop="date" label="序号" width="180" align="center"></el-table-column> -->
        <el-table-column prop="arId" label="业务ID" width="180" align="center"></el-table-column>
        <el-table-column prop="supplyCompany" label="供应商" align="center"></el-table-column>
        <el-table-column prop="projectCompany" label="项目公司" align="center"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" align="center"></el-table-column>
        <el-table-column label="合同操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="download(scope.row.contractId)" v-if="scope.row.contractId">下载</el-button>
            <el-button type="primary" size="mini" @click="hecheng(scope.row.arId)" v-else>生成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axiosdownd from 'axios';
export default {
  name: "contractsList",
  data() {
    return {
      options: [
        {
          value: "客户名称",
          label: "客户名称"
        },
        {
          value: "项目公司",
          label: "项目公司"
        },
        {
          value: "合同名称",
          label: "合同名称"
        }
      ],
      tableData: [
        {address: 'aaaa'}
      ],
      value: "",
      input: "",
      currentPage: 1,
      total: null
    };
  },
  created() {
    this.getdata(1);
  },
  methods: {
    getdata(val) {
      this.currentPage = val;
      let obj = {};
      if (!this.value) {
        obj ={};
      } else if (this.value == '客户名称') {
        obj.clientCompany = this.input;
      } else if (this.value == '项目公司') {
        obj.projectCompany = this.input;
      } else if (this.value == '合同名称') {
        obj.contractName = this.input;
      }
      obj.projectId = sessionStorage.getItem('swdypId');
      obj.page = this.currentPage;
      this.axios
        .get("AdminAPI/projectContract/showContractList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    download(id) {
      this.$prompt('请先输入文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '文件名不能为空'
      }).then(({ value }) => {
        this.getdown(value, id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    getdown (name, id) {
      this.$http.get('AdminAPI/upload/downDoc',{params: {name, id},responseType: "blob", headers: {token: sessionStorage.getItem('token')}},)
        .then(res=> {
           this.downloads(res.data, name);
        })
    },
    downloads(data, filename) {
      if (!data) {
        return;
      }
      var blob = new Blob([data], { type: "application/octet-stream" });
      var url = window.URL.createObjectURL(blob);
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = url;
      aLink.setAttribute("download", decodeURI(filename+'.doc'));
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    },
    hecheng (id) {
      this.$router.push({name: 'contractsTerms', query: {id: id}});
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  }
};
</script>

<style lang="scss">
#contractsList {
 .filterQuery {
    margin-top: 10px;
    background: #e2eefd;
    padding-left: 34px;
    position: relative;
    .tiao {
      padding: 6px 0;
      display: flex;
      .label {
        font-size: 20px;
        vertical-align: middle;
        color: #333333;
      }
      .el-radio-button__inner {
        border: none;
        padding: 6px 15px;
        font-size: 18px;
        border-radius: 0;
        margin-right: 15px;
      }
      .el-input {
        width: 230px;
      }
    }
  }
  .table {
    background: white;
    padding-top: 26px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
